<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/jQuery-3.3.1.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>user_list</title>
</head>
<body>

<button class="btn">查询用户</button>
<div class="container">
    <div class="row">
        <div class="col-md-7">
            <div class="user_list">
                <table class="get_use_table table table-bordered" style="display: none">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>pwd</th>
                    </tr>
                    </thead>
                    <tbody class="set_body">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    function u_list(data, tags) {

        if (data.length > 0) {
            for (let i = 0; i < data.length; i++) {
                let _this = data[i].fields;
                console.log(_this)
                let c = '\
                        <tr class="backend_tr"> \
                            <td>' + i + '</td> \
                            <td>' + _this.name + '</td> \
                            <td>' + _this.pwd + '</td> \
                        </tr>';
                $(tags).append(c)
            }
        }
    }

    $(".btn").on("click", function () {
        $.ajax({
            url: "{% url 'user_list' %}",
            type: "post",
            dataType: "json",
            success: function (data) {
                // 删除自定义表格的
                $(".backend_tr").remove()
                // 清空默认的抬头
                $(".get_use_table").css({"display": ""})
                // 添加标签
                u_list(data, $(".set_body"))
                {#console.log(data)#}
            }
        })
    })
</script>

</html>